<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="true" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
		 @change="change" itemWidth="33.33%" width="100%"></tui-tabs>
		<view v-if="show">
			<view class="page-box" v-show="currentTab==0">
				<couponList ref="couponList0" index="0" />
			</view>
			<view class="page-box" v-show="currentTab==1">
				<couponList ref="couponList1" index="1" />
			</view>
			<view class="page-box" v-show="currentTab==2">
				<couponList ref="couponList2" index="2" />
			</view>
		</view>

	</view>
</template>

<script>
	import couponList from "../../components/couponList.vue"
	export default {
		components: {
			couponList,
		},
		data() {
			return {
				tabs: [{
					name: "未使用"
				}, {
					name: "已使用"
				}, {
					name: "已过期"
				}],
				currentTab: 0,
				show: true,
			}
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			change(e) {
				this.currentTab = e.index
			},
			detail() {
				uni.navigateTo({
					url: '../orderDetail/orderDetail'
				})
			},
			refresh() {
				this.show = false;
				setTimeout(() => {
					this.show = true;
				}, 100)
			}
		},
		onReachBottom: function() {
			if (this.currentTab == 0) {
				this.$refs.couponList0.lists()
			} else if (this.currentTab == 1) {
				this.$refs.couponList1.lists()
			} else if (this.currentTab == 2) {
				this.$refs.couponList2.lists()
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: rgb(244, 244, 244);
	}
</style>
<style scoped>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		padding-top: 90rpx;
		height: 100%;
	}

	.page-box {}
</style>
